<template>
  <div class="search" name="search">
    <van-search
        v-model="value"
        placeholder="搜索商家，商品名称"
        @input="Search"
        @search="onSearch"
    />
    <div v-if="value" class="searchlist" name="searchlist">
      <div class="dv">
        <ul>
          <li v-for="(item,index) in search" :key="index">{{item.word}}</li>
        </ul>
      </div>
    </div>
    <!-- <div> -->
      <!-- <ul> -->
        <!-- <li v-for="item in $store.state.List">{{item}}</li> -->
      <!-- </ul> -->
    <!-- </div> -->
  </div>
</template>

<script>
import searchlist from "@/components/searchlist";

export default {
  name: 'search',
  data() {
    return {
      value: "",
      list: [],
      search: [],

    };
  },
  // 子组件转换
  components: {searchlist,},
  // 数据引入
  mounted() {
    this.$axios({
      url: '/search.json'
    }).then(res => {
      // console.log(res)
      this.list = res.data.list;
      // console.log(this.list)
    })
  },
  created() {
  },
  //点击函数事件
  methods: {
    Search() {
      console.log(this.value)
      this.search = this.list.filter(item => {
        // console.log(item)
        return item.word.includes(this.value)
      })
      console.log(this.search)
      this.$store.commit('changLists', this.search)
    },
    onSearch() {
      console.log()
      this.$store.commit('changList', this.value)
      console.log(this.$store.state.List)
    }
  },
  //计算事件
  computed: {},
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
/deep/ {
  .van-search__content {
    border-radius: 20px;
    border: 1px #008EFF solid;
    background: white;
  }
}

.searchlist {
  width: 95vw;
  margin: 0 auto;

  .dv {
    text-align: left;

    ul {
      li {
        border-bottom: 1px solid #B5B5B5;
        box-sizing: border-box;
        padding: 10px;
        text-indent: 10px;
      }
    }
  }
}
</style>
